// 城市体检
<template>
  <div class="city-medical-container">
    <split-pane
      :min-percent="12"
      :max-percent="50"
      :default-percent="12"
      split="vertical"
    >
      <template slot="paneL">
        <div class="city-medical-aside">
          <!-- 左侧菜单树 -->
          <!--  -->
          <!--          <aside-menu-->
          <!--            :list="menuList"-->
          <!--            @change-menu="changeMenu"-->
          <!--            @select-menu="selectedMenu"-->
          <!--            :active="defaultActive"-->
          <!--          />-->
          <el-scrollbar>
            <el-menu
              class="backendManagerMenu"
              :default-active="menuActive"
              :default-openeds="['0', '4', '5']"
            >
              <div v-for="(item, index) in menuList" :key="index">
                <el-submenu v-if="item.hasChildren" :index="index.toString()">
                  <template #title>
                    <div class="item">
                      <svg-icon class-name="item-img" :icon-class="item.icon" />

                      <span>{{ item.name }}</span>
                    </div>
                  </template>
                  <el-menu-item
                    v-for="(val, idx) in item.children"
                    :key="idx"
                    @click="handleMenuItemClick(val, index, idx)"
                    :index="index.toString() + '-' + idx"
                  >
                    <!-- {{ val.name }} -->
                    <div class="item">
                      <svg-icon class-name="item-img" :icon-class="val.icon" />

                      <div>{{ val.name }}</div>
                    </div>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="index.toString()"
                  @click="handleMenuItemClick(item, index, -1)"
                >
                  <template #title>
                    <div class="item">
                      <svg-icon class-name="item-img" :icon-class="item.icon" />

                      <span>{{ item.name }}</span>
                    </div>
                    <!-- {{ item.name }} -->
                  </template>
                </el-menu-item>
              </div>
            </el-menu>
          </el-scrollbar>
        </div>
      </template>
      <template slot="paneR">
        <div class="city-medical-main">
          <!-- 右侧内容菜单树 -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"> </router-view>
          </keep-alive>

          <router-view v-if="!$route.meta.keepAlive"> </router-view>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import ElScrollbar from 'element-ui/lib/scrollbar'
import aside from '@c/aside'
import splitPane from 'vue-splitpane'
import { mapGetters } from 'vuex'
import SvgIcon from '@/components/svg-icon/index.vue'
export default {
  name: 'dataConverge',
  provide() {
    const self = this
    return {
      get map() {
        return self.map
      },
    }
  },
  components: {
    // 'aside-menu': aside,
    'split-pane': splitPane,
    'el-scrollbar': ElScrollbar,
    'svg-icon': SvgIcon,
  },
  data() {
    return {
      // menuList: [
      //   {
      //     icon_name: '体系管理',
      //     id: 'indicator',
      //     index_name: '指标体系管理',
      //     index_type: 'indicator',
      //     is_single: true,
      //     is_click: true,
      //     roleId: ['citymanager', 'checkmanager'],
      //     children: [
      //       {
      //         icon_name: '基础指标',
      //         id: 'indicatorManage',
      //         index_name: '基础指标',
      //         index_type: 'indicatorManage',
      //         is_single: false,
      //         roleId: ['citymanager'],
      //       },
      //       {
      //         icon_name: '特色指标',
      //         id: 'indicatorManageSpecial',
      //         index_name: '特色指标',
      //         index_type: 'indicatorManageSpecial',
      //         is_single: false,
      //         roleId: ['citymanager', 'checkmanager'],
      //       },
      //     ],
      //   },
      //   {
      //     icon_name: '任务管理1',
      //     id: 'taskPublish',
      //     index_name: '任务管理',
      //     index_type: 'taskPublish',
      //     is_single: true,
      //     roleId: ['citymanager'],
      //   },
      //   {
      //     icon_name: '数据填报1',
      //     id: 'fillInList',
      //     index_name: '数据填报',
      //     index_type: 'fillInList',
      //     is_single: true,
      //   },
      //   {
      //     icon_name: '成果提交',
      //     id: 'dataRelease',
      //     index_name: '报告生成',
      //     index_type: 'dataRelease',
      //     is_single: true,
      //   },
      //   {
      //     icon_name: '报告上传',
      //     id: 'dataReport',
      //     index_name: '报告上传',
      //     index_type: 'dataReport',
      //     is_single: true,
      //   },
      // ],
      // defaultActive: 'indicatorManage',
      menuActive: '',
    }
  },
  watch: {},
  created() {},
  mounted() {
    // this.defaultActive = this.$route.name
    // console.log('this.$route :>> ', this.$route)
    // if (this.$route.path === '/data-converge') {
    //   this.defaultActive = this.menuList[0].children[0].index_type
    //   this.$router.push({ name: this.defaultActive })
    // } else {
    //   this.defaultActive = this.$route.name
    // }

    // console.log(this.$route)
    // console.log('this.user :>> ', this.user);
    // if (this.user && this.user.userLevel === 3) {
    //   this.selectedMenu({
    //     icon_name: "任务发布",
    //     id: "taskPublish",
    //     index_name: "任务管理",
    //     index_type: "taskPublish",
    //     is_single: true,
    //     role: 3,
    //   });
    // } else {
    //   this.selectedMenu({
    //     icon_name: "数据填报",
    //     id: "fillInList",
    //     index_name: "数据填报",
    //     index_type: "fillInList",
    //     is_single: true,
    //     // role: 1
    //   });
    // }
    // 只可能有一个会满足，所以不打断循环也不影响结果
    this.menuList.forEach((val, index) => {
      if (val.path === this.$route.path) {
        this.menuActive = index.toString()
      }
      if (val.hasChildren) {
        val.children?.forEach((info, idx) => {
          if (info.path === this.$route.path) {
            this.menuActive = index + '-' + idx
          }
        })
      }
    })
  },
  computed: {
    ...mapGetters(['user', 'currentUser']),
    // menuRole() {
    //   const list = this.menuList.map((i) => {
    //     if (i.children) {
    //       i.children = i.children.filter((j) => {
    //         return j.roleId ? j.roleId.includes(this.user.roleId) : true
    //       })
    //     }
    //     return i
    //   })
    //   return list.filter((i) =>
    //     i.roleId ? i.roleId.includes(this.user.roleId) : true
    //   )
    // },
    menuList() {
      const currentUser = this.currentUser
      const treeData = currentUser?.moduleTree[0].children.filter(
        (i) => i.address === 'index'
      )
      const menus = currentUser?.getSideMenuList(
        JSON.parse(JSON.stringify(treeData[0].children))
      )

      menus.map((menu) => {
        menu.icon = this.getIcon(menu.key)
        if (menu.children) {
          menu.children.map((child) => {
            child.icon = this.getIcon(child.key)
          })
        }
      })
      // console.log(menus)
      return menus || []
    },
  },
  methods: {
    getIcon(key) {
      let icon = ''
      switch (key) {
        case 'index::index':
          icon = '体系管理'
          break
        case 'index::index::base':
          icon = '基础指标'
          break
        case 'index::index::special':
          icon = '特色指标'
          break
        case 'index::publish':
          icon = '任务管理1'
          break
        case 'index::fillIn':
          icon = '数据填报1'
          break
        case 'index::release':
          icon = '成果提交'
          break
        case 'index::report':
          icon = '报告上传'
          break
      }
      return icon
    },
    selectedMenu(menu) {
      // console.log('menu :>> ----------------', menu);
      this.$router.push({ name: menu.index_type, query: menu.params })
    },
    changeMenu(id) {
      this.defaultActive = ''
      this.defaultActive = id
    },
    handleMenuItemClick(item, index, idx) {
      const { name } = item
      this.menuActive = idx === -1 ? `${index}` : `${index}-${idx}`
      const path = this.currentUser?.getSidePath(item.key)
      if (path) {
        this.$router.push(path)
      } else {
        this.$router.push('/backend-management')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.city-medical-container {
  height: 100%;
  width: 100%;
  position: relative;

  // display: flex;
  .city-medical-aside {
    width: 100%;
    height: 100%;

    :deep(.el-submenu__title) {
      height: 40px;

      .item {
        height: 40px !important;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        //color: #4e525f;
      }
    }

    :deep(.el-menu) {
      > div > .el-menu-item {
        height: 40px;

        .item {
          height: 40px !important;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 700;
          //color: #4e525f;
        }

        &.is-active {
          .item {
            //color: #3da1d2;
          }
        }
      }
    }

    .item {
      height: 50px;
      display: flex;
      align-items: center;

      // i {
      //   svg {
      //     margin-top: -60px;
      //   }
      // }

      &-img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }

      &-icon {
        height: 20px;
        width: 20px;
        margin-right: 5px;
      }

      .menu-top {
        top: -6px;
      }
    }
  }

  .city-medical-main {
    width: calc(100%);
    height: 100%;
    background-color: #f4f8fe;
  }
}

.time-line {
  position: absolute;
  bottom: 10px;
  display: flex;
  background: red;
  width: 60%;
  left: 400px;
}
</style>
